import marked from 'marked'

const renderer = new marked.Renderer();
// 重写表格渲染方法（核心：添加 class）
renderer.table = function(header, body) {
  return `
    <div class="marked-table-container"> <!-- 包裹容器用于响应式 -->
      <table class="marked-table">${header}${body}</table>
    </div>
  `;
};

renderer.list = function (listItems, ordered) {
  // 检查是否是有序列表（ordered 为 true）
  const tag = ordered ? 'ol' : 'ul';
  const listClass = ordered ? 'custom-ordered-list' : 'custom-unordered-list'; // 为有序列表添加类
  // 返回修改后的 HTML 结构
  return `
    <${tag} class="${listClass}">
      ${listItems} <!-- listItems 是已生成的 <li> 列表 -->
    </${tag}>
  `;
};

// 重写列表项（<li>）的渲染方法（可选）
renderer.listitem = function (text) {
  // 为每个 <li> 添加自定义类
  return `<li class="custom-list-item">${text}</li>`;
};

// 初始化 marked
marked.setOptions({
  breaks: true,
  gfm: true,
  renderer: renderer // 应用自定义渲染器
});

export default {
  returnContent(text) {
    if (text) {
      return marked(text)
    }
  },
};
